 <template> 
    <div class="site">
        <!--地址列表-->
        <div class="group" v-if="type=='group'" >
            <div class="main" @click="selectItem(item)">
                <div class="clear-both name">
                    <span class="float-left">{{item.name}}</span>
                    <span class="float-right">{{item.phone}}</span>
                </div>
                <div class="detail">
                    {{item.address}}{{item.address_detail}}
                </div>
            </div>
            <div class="footer clear-both">
                <div class="float-left">
                    <radio-group class="radio-group" @click="radioChange(item)">
                        <label class="radio">
                            <radio color="#CD4640" value='value' :checked="item.checked" />默认地址
                        </label>
                    </radio-group>
                </div>
                <div class="float-right delete" @click="deleteItem($event,item)">删除</div>
            </div>
        </div>

       <!--展示收货地址-->
        <div class="site-win" v-else @click="selectSite">
            <div class="main">
                <div class="clear-both name">
                    <span class="float-left">{{item.name}}</span>
                    <span class="float-right">{{item.phone}}</span>
                </div>
                <div class="detail">{{item.address}}{{item.address_detail}}</div>
            </div>
            <div class="icon" v-if="payLink">
                <i class="iconfont-jiantouyou iconfont"></i>
            </div>
        </div>
    </div> 
</template>

<script>
export default {
    props: {
        item:{
            default:{},
            type:Object
        },
        type:{
            default:'',
            type:String
        },
        payLink:{
            default:false,
            type:Boolean
        } 
    },
    methods:{
        radioChange(item){
            item.checked=!item.checked; 
            this.$emit('radioChange',item);
        },
        //当前选择的地址
        selectItem(item){
            this.$emit('select',item);
        },
        //删除地址列表
        deleteItem(e,item){
            this.$emit('deleteItem',item);
        },

        //跳转地址列表
        selectSite(){
            this.$emit('jump');
        },
    },
}
</script>

<style scoped lang="scss">
.site{ 
    width:100%;
    min-height:160rpx;
    font-size:28rpx;
    background:#fff;
    padding:20rpx;
    box-sizing:border-box;
    border-radius:10rpx;
    margin-bottom:20rpx;
    /*地址列表 */
    .group{
        .main{
            flex:1;
            width:100%;
            padding:10rpx 15rpx 30rpx;
            box-sizing:border-box;
            border-bottom:1rpx solid #DFDFDF;
            .name{
                padding-bottom:15rpx;
            }
            .detail{
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
            }
        }
        .footer{
            padding:20rpx 15rpx 0;
            box-sizing:border-box;
            .delete{
                line-height:50rpx;
            }
        }
    }
    /*选中的地址 */
    .site-win{
        display:flex;
        justify-content:center;
        align-items:Center; 
        .main{
            flex:1;
            width:100%;
            .name{
                padding-bottom:15rpx;
            }
            .detail{
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
            }
        }
        .icon{
            flex:0 0 50rpx;
            
            i{
                margin-left:20rpx;
            }
        }
    }
}
</style>
